<template>
  <div :class="[currentBackground, currentFont]" class="container">
    <el-container>
      <el-header>nonehand脚本平台</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu default-active="1">
            <el-menu-item index="1" @click="handleMenuClick(1)">
              <el-icon>
                <HomeFilled />
              </el-icon>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item index="2" @click="handleMenuClick(2)">
              <el-icon>
                <Tools />
              </el-icon>
              <span slot="title">脚本配置</span>
            </el-menu-item>
            <el-menu-item index="3" @click="handleMenuClick(3)">
              <el-icon>
                <Pointer />
              </el-icon>
              <span slot="title">脚本分享平台</span>
            </el-menu-item>
            <el-menu-item index="4" @click="handleMenuClick(4)">
              <el-icon>
                <User />
              </el-icon>
              <span slot="title">用户界面设置</span>
            </el-menu-item>
            <el-menu-item index="5" @click="handleMenuClick(5)">
              <el-icon>
                <UserFilled />
              </el-icon>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="6" @click="handleMenuClick(6)">
              <el-icon>
                <Menu />
              </el-icon>
              <span slot="title">脚本管理</span>
            </el-menu-item>
            <el-menu-item index="7" @click="handleMenuClick(7)">
              <el-icon>
                <Comment />
              </el-icon>
              <span slot="title">AI助手</span>
            </el-menu-item>
            <el-menu-item index="8" @click="handleMenuClick(8)">
              <el-icon>
                <Promotion />
              </el-icon>
              <span slot="title">日志</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <template v-if="activeIndex == 1">
              <MainList></MainList>
            </template>
            <template v-else-if="activeIndex == 2">
              <Script></Script>
            </template>
            <template v-else-if="activeIndex == 3">
              <ShareList></ShareList>
            </template>
            <template v-else-if="activeIndex == 4">
              <UsersetList @update-background="backgroundStyle.value = $event" @update-font="fontStyle.value = $event">
              </UsersetList>
            </template>
            <template v-else-if="activeIndex == 5">
              <UserList></UserList>
            </template>
            <template v-else-if="activeIndex == 6">
              <ScriptList></ScriptList>
            </template>
            <template v-else-if="activeIndex == 7">
              <AIList></AIList>
            </template>
            <template v-else-if="activeIndex == 8">
              <NewsList></NewsList>
            </template>
          </el-main>
          <el-footer>@版权归nonehand小组所有</el-footer>
        </el-container>
      </el-container>
    </el-container>

    <div class="bg-upload">
      <el-upload class="avatar-uploader" :action="''" :show-file-list="false" @change="handleBgUpload">
        <img v-if="backgroundImage" :src="backgroundImage" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>

    <el-dialog v-model="centerDialogVisible" title="公告" width="500" align-center>
      <div>
        <p>使用本软件必须要用油猴插件</p>
        <p>以下是三个插件</p>
        <a href="./public/nonehand鼠标点击.txt" download>NoneHand鼠标脚本</a>
        <br />
        <a href="./public/nonehand视频连播.txt" download>NoneHand视频脚本</a>
        <br />
        <a href="./public/nonehand答题脚本.txt" download>NoneHand答题脚本</a>
        <p>下载以后在油猴点击添加新脚本</p>
        <p>将上面的txt文件中复制到油猴新脚本中即可使用</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, provide, computed } from 'vue';
import MainList from './main/list.vue';
import UserList from './useradmin/list.vue';
import Script from './script/list.vue';
import ScriptList from './scriptadmin/list.vue';
import ShareList from './share/list.vue';
import UsersetList from './userset/list.vue';
import AIList from './AI/gpt.vue';
import NewsList from './news/News.vue';
import {
  onMounted,
} from 'vue'
// 初始化 当前激活的菜单下标
const activeIndex = ref(1);
// 背景样式状态
const backgroundStyle = ref('light-mode');
// 字体样式状态
const fontStyle = ref('default-font');
const backgroundImage = ref('');
const centerDialogVisible = ref(false);

// 计算当前背景样式
const currentBackground = computed(() => {
  return backgroundImage.value ? 'bg-image' : backgroundStyle.value;
});

onMounted(() => {
  centerDialogVisible.value = true;
})

// 当前字体样式
const currentFont = computed(() => {
  return fontStyle.value;
});

// 提供背景样式
provide('backgroundStyle', backgroundStyle);
provide('fontStyle', fontStyle);
provide('backgroundImage', backgroundImage);

// 处理上传的背景图片
const handleBgUpload = (file) => {
  const url = URL.createObjectURL(file.raw);
  backgroundImage.value = url;
};

// 监听左侧菜单点击事件
const handleMenuClick = (index) => {
  activeIndex.value = index;
}

// 提供方法给别的组件使用
const changeBackground = (value) => {
  backgroundStyle.value = value; // 更新背景样式
};

const changeFont = (value) => {
  fontStyle.value = value; // 更新字体样式
};

// 提供方法
provide('changeBackground', changeBackground);
provide('changeFont', changeFont);
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
  text-align: center;
  height: calc(100vh - 60px);
}

.el-main {
  color: #333;
}

/* 动态绑定的样式 */
.container {
  margin-bottom: 40px;
  transition: background-color 0.3s ease;
}

.light-mode {
  background-color: #ffffff;
  color: #000000;
}

.dark-mode {
  background-color: #222;
  color: #FFF;
}

.blue-mode {
  background-color: #55ffff;
  color: #FFF;
}

.default-font {
  font-family: Arial, sans-serif;
}

.serif-font {
  font-family: "Times New Roman", Times, serif;
}

.sans-serif-font {
  font-family: "Helvetica", sans-serif;
}

.bg-upload {
  padding: 20px;
}
</style>